<template>
  <div class="show">
    <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="2000">
      <img src="@/assets/img/teleplay/2-4.webp" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="@/assets/img/teleplay/2-1.webp" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="@/assets/img/teleplay/2-2.webp" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  </div>
</template>

<script>
export default {
  name:'SlideShowTeleplay'
}
</script>

<style scoped>
.show{
    width: 100%;
    height: 600px;
    }
  /* .zu-carousel{
    height: 61%;
    margin-top: 70px;
  } */
  .carousel-item img{
    width: 100%;
    height: 600px;
    }
</style>